<template>
	<view>
		<topbar title="发布人脉" jt_c="2" background="background:#5EBCA3;color:#fff;"></topbar>
		<view class="content">
			<view class="boxs">
				<view style="margin-bottom: 12rpx;">名片简介</view>
				<u-input v-model="jianjie" placeholder="请输入简介" type="textarea" :border="true" maxlength="140"></u-input>
			</view>
			<!-- <view class="dis_f_sb_c" style="width: 100%;margin-bottom: 24rpx;">
				<view class="line"></view>
				<view class="text">置顶获取更高曝光</view>
				<view class="line"></view>
			</view>
			<view style="margin-bottom: 54rpx;">
				<view class="dis_f_sa_c">
					<view v-for="(item,index) in je_list" :key="item.id" @click="selectColor(index,item)">
						<view class="jin_e dis_f_co_c_c" :class="[ item.selected ? 'jin_e2' : 'jin_e']">
								<view>{{item.name}}</view>
								<view style="margin-bottom: 12rpx;">{{item.topnum}}</view>
								<view class="num">￥{{item.num}}</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="btn dis_f_c_c" @click="submit">
				修改
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				jianjie:'',
				je_list: [{
						name: '不置顶',
						num:'30',
						topnum:'爆粉：100-200',
						id: 1,
						selected: false
					},
					{
						name: '置顶',
						num:'50',
						id: 2,
						selected: false
					}
				],
			};
		},
		onLoad(e){
			if(e == undefined) {
				this.$.ti_shi('参数错误');
				var that = this;
				setTimeout(function() {
					that.$.open('/pages/ren_mai/rm_gl');
				}, 2000); 
			}
			this.id = e.id;
		},
		onShow() {
			if (uni.getStorageSync('token') == '') {
				this.$.ti_shi('请先登录账号');
				var that = this;
				setTimeout(function() {
					that.$.open('/pages/login/login');
				}, 2000); 
			}
			if (this.id > 0) {
				this.$.ajax(1, 'post', 'fans/fans_info', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					id:this.id
				}, (res) => {
					if(res.code == 1){
						this.jianjie = res.data.content;
					}else{
						this.$.ti_shi(res.msg)
						if(res.code == 9) {
							var that = this;
							setTimeout(function() {
								that.$.open('/pages/login/login');
							}, 2000);
						} 
					}
				})
			}else{
				this.$.ti_shi('参数错误');
				var that = this;
				setTimeout(function() {
					that.$.open('/pages/ren_mai/rm_gl');
				}, 2000); 
			}
		},
		methods:{
			selectColor(index, item) {
				let that = this
				for (let items in that.je_list) { //这个循环的时候要用for in 来遍历 当前选中下标为true 其他的下标为false 避免多选
					that.je_list[items].selected = false;
					that.je_list[index].selected = true;
					that.je = that.je_list[index].money ;
					that.name =  that.je_list[index].title;
					that.id =  that.je_list[index].id ;
				}
				// console.log(that.je)
			},
			submit(){
				if(this.jianjie == ''){
					this.$.ti_shi('请填写简介')
					return;
				}
				this.$.ajax(1, 'post', 'fans/edit_fans', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					id:this.id,
					content:this.jianjie,
				}, (res) => {
					console.log(res)
					if(res.code == 1){
						this.$.ti_shi(res.msg)
						var that = this;
						setTimeout(function() {
							that.$.open('/pages/ren_mai/rm_gl');
						}, 2000);
					}else{
						this.$.ti_shi(res.msg);
						if(res.code == 9) {
							var that = this;
							setTimeout(function() {
								that.$.open('/pages/login/login');
							}, 2000);
						}  
					}
				})
			}	
		}
	}
</script>

<style lang="scss">
	.btn{
		width: 100%;
		color: #fff;
		height: 98rpx;
		border-radius: 50rpx;
		background-color: #E23C63;
	}
	.jin_e {
		border-radius: 20rpx;
		width: 204rpx;
		height: 180rpx;
		box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
		color: #222;
		font-size: 22rpx;
		line-height: 32rpx;
		background-color: #fff;
		margin-bottom: 36rpx;
		.num{
			font-weight: bold;
			font-size: 36rpx;
			line-height: 50rpx;
		}
		.je_top{
			width: 204rpx;
			margin-bottom: 12rpx;
			height: 56rpx;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			background-color: #bbb;
			font-size: 22rpx;
			line-height: 32rpx;
			color: #fff;
		}
		
	}
	
	.jin_e2 {
		border-radius: 20rpx;
		width: 204rpx;
		height: 180rpx;
		box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
		color: #fff;
		font-size: 22rpx;
		line-height: 32rpx;
		background-color: #E23C63;
		margin-bottom: 36rpx;
		border: 2rpx solid #E23C63;
		border-radius: 20rpx;
		.num{
			font-weight: bold;
			font-size: 36rpx;
			line-height: 50rpx;
		}
		.je_top{
			width: 204rpx;
			margin-bottom: 12rpx;
			height: 56rpx;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			background-color: #E6B35A;
			font-size: 22rpx;
			line-height: 32rpx;
			color: #fff;
		}
		
	}
	.content{
		padding: calc(var(--status-bar-height) + 124rpx) 24rpx 0 24rpx;
		.boxs{
			padding: 36rpx 24rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
			margin-bottom: 36rpx;
		}
		.line {
			height: 2rpx;
			width: 190rpx;
			background-color: #E23C63;
		}
		
		.text {
			font-size: 22rpx;
			color: #E23C63;
			line-height: 42rpx;
		}
	}
</style>
